MVC 架構（Model-View-Controller）是一種常見的軟體設計模式，特別適合用來開發網頁應用。它將應用程式分為三個主要部分：Model、View 和 Controller，以分離資料處理、使用者介面和應用邏輯，這樣可以提高程式碼的可維護性和可讀性。

在學習 MVC 架構之前，理解每個部分的功能和作用是很重要的：

• Model（模型）：處理應用程式中的資料邏輯。它負責數據的讀取、寫入和驗證，通常與資料庫直接交互。
• View（視圖）：呈現資料給使用者的部分。View 負責顯示 Model 中的資料，並將使用者輸入的資料傳遞給 Controller。
• Controller（控制器）：處理來自 View 的輸入，與 Model 交互並決定要顯示哪個 View。Controller 是應用程式邏輯的核心部分。

使用 Vite 初始化專案並看 MVC 架構

my-vite-app/
|-- public/
|-- src/
|   |-- assets/
|   |-- components/
|   |-- models/
|   |-- controllers/
|   |-- views/
|   |-- App.jsx
|   |-- main.jsx
|-- index.html
|-- package.json
|-- vite.config.js

• public/：這個資料夾通常包含靜態資源，例如圖片、字體和公共的 HTML 檔案。這些文件不會被 Webpack 或其他工具進行修改或處理。
• src/：這是主要的開發目錄，所有的程式碼都應該放在這裡。MVC 的各個部分也會在這裡進行實現。
• components/：這裡放置的是可重用的 UI 組件，例如按鈕、表單、卡片等。這些組件可以在多個 View 中重複使用。
• models/：這是專門放置 Model 層的地方。Model 負責處理與資料的交互，例如向 API 發送請求或讀取本地存儲。每個 Model 應該是一個獨立的檔案，例如 UserModel.js，它可能會包含方法來處理使用者相關的數據，如 getUser() 或 updateUser()。
• controllers/：這裡是放置控制器的地方。Controller 是應用邏輯的核心部分，負責處理來自 View 的事件，並與 Model 互動來更新數據或檢索資料。每個 Controller 應該是一個獨立的檔案，例如 UserController.js，它可能會包含處理用戶操作的方法，如 handleAddUser()。
• views/：這個資料夾用來存放應用程式中的頁面或視圖。例如，你可能有 HomeView.jsx、UserView.jsx 等。View 會接收來自 Controller 的數據，並負責顯示這些數據。